<template>
  <div class="dashboard-container">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-card>
          <template #title>
            <span>总访问量</span>
          </template>
          <h2>8,846</h2>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <template #title>
            <span>今日访问</span>
          </template>
          <h2>1,234</h2>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <template #title>
            <span>活跃用户</span>
          </template>
          <h2>3,521</h2>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'DashboardView'
})
</script>

<style scoped>
.dashboard-container {
  .ant-card {
    margin-bottom: 24px;
  }
}
</style>
